<template>
	<div style="padding: 20px 40px">
		<div class="yh_topsearch yh_dis yh_disJub" style="border: none; padding: 0px; margin-top: 20px">
			<div class="dis disAl" style="margin-top: 10px">
				<div style="margin-left: 10px">
					<div class="foSi12 hei22" style="color: #979797">状态</div>
					<el-select v-model="search.activities_id" style="width: 140px" size="small" placeholder="请选择">
						<el-option v-for="item in search.activities" :key="item.value" :label="item.label"
							:value="item.value" />
					</el-select>
				</div>
				<div style="margin-left: 10px">
					<el-button type="primary" size="small" class="bac6b7" style="margin-top: 22px">搜索</el-button>
				</div>
			</div>
		</div>
		<div v-loading="loading" style="padding: 15px 5px">
			<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
				@selection-change="handleSelectionChange">
				<el-table-column label="会员姓名">
					<template slot-scope="scope">
						<div class="dis disAl">
							<img :src="scope.row.avatar" style="width: 30px;height: 30px;">
							{{ scope.row.name }}
							{{ scope.row.mobile }}
						</div>

					</template>
				</el-table-column>
				<el-table-column prop="card_name" label="请假卡号/卡片" />
				<el-table-column prop="cardnum" label="请假时间" />
				<el-table-column prop="deduction_money" label="请假天数" />
				<el-table-column prop="balance" label="状态" />
				<el-table-column prop="balance" label="申请时间" />
				<el-table-column prop="balance" label="审批时间" />
				<el-table-column prop="balance" label="审批人" />
				<el-table-column prop="balance" label="请假原因" />
				<el-table-column :label="$t('table.actions')" align="center" class-name="small-padding fixed-width">
					<template slot-scope="scope">
						<div class="yh_dis dis" style="justify-content: center">
							<div class="yh_dis" style="align-items: center; margin-right: 10px">
								<i class="el-icon-circle-close" style="color: #6b7cdd; font-size: 18px" />取消预约
							</div>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="dis" style=" margin-top: 20px;justify-content: center">
				<div style="margin-top: 8px">共0条记录，每页10条</div>
				<el-pagination :current-page.sync="listQuery.page" :page-size="15" layout="prev, pager, next, jumper"
					:total="listQuery.limit" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: 'Dashboard',
		data() {
			return {
				listQuery: {
					page: 1,
					limit: 0
				},
				search: {
					activities: [{
						label: '不指定',
						value: 0
					}, {
						label: '待审核',
						value: 1
					}, {
						label: '已通过',
						value: 2
					}, {
						label: '已驳回',
						value: 3
					}, {
						label: '已撤销',
						value: 4
					}],
					activities_id: 0
				},
				currentRole: 'adminDashboard',
				loading: false,
				// 预约
				tableData: [],
				multipleSelection: []
			}
		},
		computed: {
			...mapGetters([
				'roles'
			])
		},
		created() {
			if (!this.roles.includes('admin')) {
				this.currentRole = 'editorDashboard'
			}
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: [{
						name: '团课预约记录',
						url: '/dashboard',
						pd: true
					},
					{
						name: '私教预约记录',
						url: '/privateappointment',
						pd: true
					},
					{
						name: '爽约惩罚',
						url: '/punishment',
						pd: true
					},
					{
						name: '储物柜',
						url: '/locker',
						pd: true
					},
					{
						name: '请假管理',
						url: '/leavemanage',
						pd: true
					},
					{
						name: '班课上课记录',
						url: '/classrecord',
						pd: true
					}
				]
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 4
			})
			this.gettime()
			var check = localStorage.getItem('check')
			if (check) {
				var list = check.split(',')
				this.check = list.map(Number)
			}
			this.timeCreated()
		},
		methods: {
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`)
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`)
			},
			handleSelectionChange(val) {
				this.multipleSelection = val
			},
			gettime() {
				const now = new Date()
				const year = now.getFullYear()
				const month = now.getMonth() + 1
				const day = now.getDate()
				this.todayatime = day
				this.daytime = year + '-' + month + '-' + day
			}
		}
	}
</script>
<style>
	.yh_dis {
		cursor: pointer;
	}
</style>